<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>验证BOOTSTRAP</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/bootstrap-icons/1.8.3/font/bootstrap-icons.min.css">
<!-- <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/5.1.3/css/bootstrap.min.css"> -->
</head>
<body>
	<div class="container">
		<form class="row row-cols-lg-auto g-3 align-items-center m-3">
			<div class="col-12">
				<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
				<div class="input-group">
					<div class="input-group-text">@</div>
					<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
				</div>
			</div>

			<div class="col-12">
				<label class="visually-hidden" for="inlineFormSelectPref">Preference</label> <select class="form-select" id="inlineFormSelectPref">
					<option selected>Choose...</option>
					<option value="1">One</option>
					<option value="2">Two</option>
					<option value="3">Three</option>
				</select>
			</div>

			<div class="col-12">
				<div class="form-check">
					<input class="form-check-input" type="checkbox" id="inlineFormCheck"> <label class="form-check-label" for="inlineFormCheck"> Remember me </label>
				</div>
			</div>

			<div class="col-12">
				<button type="submit" class="btn btn-primary">搜索</button>
			</div>
		</form>

		<table class="table table-primary table-striped table-hover table-bordered">
			<thead>
				<tr>
					<th scope="col">#</th>
					<th scope="col">First</th>
					<th scope="col">Last</th>
					<th scope="col">Handle</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">1</th>
					<td>Mark</td>
					<td>Otto</td>
					<td>@mdo</td>
				</tr>
				<tr>
					<th scope="row">2</th>
					<td>Jacob</td>
					<td>Thornton</td>
					<td>@fat</td>
				</tr>
				<tr>
					<th scope="row">3</th>
					<td colspan="2">Larry the Bird</td>
					<td>@twitter</td>
				</tr>
			</tbody>
		</table>
		<nav aria-label="Page navigation example">
			<ul class="pagination justify-content-end">
				<li class="page-item disabled"><a class="page-link"><span aria-hidden="true">&laquo;</span></a></li>
				<li class="page-item active"><a class="page-link" href="#">1</a></li>
				<li class="page-item"><a class="page-link" href="#">2</a></li>
				<li class="page-item"><a class="page-link" href="#">3</a></li>
				<li class="page-item"><a class="page-link" href="#"><span aria-hidden="true">&raquo;</span></a></li>
			</ul>
		</nav>
	</div>
</body>
<!-- <script type="text/javascript"	src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>  -->
<!-- <script type="text/javascript" src="js/bootstrap.min.js"></script>  -->
<script type="text/javascript" src="https://cdn.staticfile.org/bootstrap/5.1.3/js/bootstrap.min.js"></script>
</html>